import {Button, Space, Tooltip} from "antd";
import {
    BlockOutlined,
    CopyOutlined,
    DeleteOutlined, DownOutlined,
    EyeInvisibleOutlined,
    LockOutlined, RedoOutlined, UndoOutlined,
    UpOutlined
} from "@ant-design/icons";
import {useDispatch} from "react-redux";
import {
    changeComponentHidden, copySelectedComponent, moveComponent, pasteCopiedComponent,
    removeSelectedComponent,
    toggleComponentLocked
} from "../../../store/componentsReducer";
import useGetComponentInfo from "../../../hooks/useGetComponentInfo";
import {ActionCreators} from "redux-undo";

export const EditToolbar = () => {
    const dispatch = useDispatch()
    const {selectedId, componentList, selectedComponent, copiedComponent} = useGetComponentInfo()
    const {isLocked} = selectedComponent || {}

    const length = componentList.length;
    const selectedIndex = componentList.findIndex(c => c.fe_id === selectedId)
    const isFirst = selectedIndex <= 0
    const isLast = selectedIndex >= length - 1

    function handleDelete() {
        dispatch(removeSelectedComponent())
    }

    function handleHidden() {
        dispatch(changeComponentHidden({fe_id: selectedId, isHidden: true}))
    }

    function handleLock() {
        dispatch(toggleComponentLocked({fe_id: selectedId}))
    }

    function copy() {
        dispatch(copySelectedComponent())
    }

    function paste() {
        dispatch(pasteCopiedComponent())
    }

    function moveUp() {
        if (isFirst) return
        dispatch(moveComponent({oldIndex: selectedIndex, newIndex: selectedIndex - 1}))
    }

    function moveDown() {
        if (isLast) return
        dispatch(moveComponent({oldIndex: selectedIndex, newIndex: selectedIndex + 1}))
    }

    function undo() {
        dispatch(ActionCreators.undo())
    }

    function redo() {
        dispatch(ActionCreators.redo())
    }

    return (
        <Space>
            <Tooltip title={'删除'}>
                <Button onClick={handleDelete} shape={'circle'} icon={<DeleteOutlined/>}></Button>
            </Tooltip>
            <Tooltip title={'隐藏'}>
                <Button onClick={handleHidden} shape={'circle'} icon={<EyeInvisibleOutlined/>}></Button>
            </Tooltip>
            <Tooltip title={'锁定'}>
                <Button onClick={handleLock} shape={'circle'} icon={<LockOutlined/>}
                        type={isLocked ? 'primary' : 'default'}></Button>
            </Tooltip>
            <Tooltip title={'复制'}>
                <Button onClick={copy} shape={'circle'} icon={<CopyOutlined/>}
                ></Button>
            </Tooltip>
            <Tooltip title={'粘贴'}>
                <Button disabled={copiedComponent === null} onClick={paste} shape={'circle'} icon={<BlockOutlined/>}
                ></Button>
            </Tooltip>
            <Tooltip title={'上移'}>
                <Button disabled={isFirst} onClick={moveUp} shape={'circle'} icon={<UpOutlined/>}
                ></Button>
            </Tooltip>
            <Tooltip title={'下移'}>
                <Button disabled={isLast} onClick={moveDown} shape={'circle'} icon={<DownOutlined/>}
                ></Button>
            </Tooltip>
            <Tooltip title={'撤销'}>
                <Button onClick={undo} shape={'circle'} icon={<UndoOutlined/>}
                ></Button>
            </Tooltip>
            <Tooltip title={'重做'}>
            <Button  onClick={redo} shape={'circle'} icon={<RedoOutlined/>}
            ></Button>
        </Tooltip>

        </Space>
    );
};